import { FC, memo } from 'react';
import { Flex } from '@chakra-ui/react';
import AlbumItem from '../AlbumItem/index'; // 假设你已经创建了 AlbumItem 组件

interface IProps {
    albums: Array<{
        name: string;
        id: number;
        picUrl: string;
        bio: string;
    }>;
}

const AlbumList: FC<IProps> = ({ albums }) => (
    <Flex direction="column" alignItems="start" >
        {albums.map((album) => (
            <AlbumItem key={album.id} album={album} />
        ))}
    </Flex>
);

export default memo(AlbumList);